<template>
	<view class="brand">
		<!-- 支付宝自定义导航栏 -->
		<CustomBar />
		<view class="content">
			<!-- <view class="brandList" v-if="brandList.length > 0">
				<view class="item" v-for="item in brandList" @click="goDetail(item.id)">
					<view class="left">
						<image :src="item.logo">
					</view>
					<view class="right">
						<view class="name">{{item.name}}({{item.logoName}})</view>
						<view class="description">{{item.description}}</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty> -->
			<uni-indexed-list :options="brandList" :showSelect="false" @click="goDetail"></uni-indexed-list>
		</view>
	</view>
</template>

<script>
	import request from '../../api/index.js'
	import uniIndexedList from '../../uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list.vue'
	import {
		sortByFirstLetter
	} from '../../util/index.js'
	import {
		list
	} from './index.js'
	export default {
		data() {
			return {
				brandName: '',
				pageNum: 1,
				pageSize: 10,
				total: 0,
				brandList: [],
				loadStatus: 'more',
				loadText: '查看更多',
				list
			}
		},
		components: {
			uniIndexedList
		},
		onShow() {
			// #ifdef MP-ALIPAY
			my.setNavigationBar({
				frontColor: '#0000',
				backgroundColor: '#ffffff',
			})
			// #endif
		},
		onLoad() {
			this.getBrandList();

		},
		methods: {
			async getBrandList() {
				const res = await request('/brand/list', {
					isApplet: true
				}, 'GET')
				if (res.status === 0) {
					this.brandList = sortByFirstLetter(res.data)
				}
			},
			goDetail(e) {
				const id = e ? e.item.id : ''
				const brandName = e ? e.item.name : ''
				if (id) {
					uni.navigateTo({
						url: `/pages/brandDetailList/brandDetailList?brandId=${id}&&brandName=${brandName}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.brand {
		width: 100%;
		height: 100vh;
		background: linear-gradient(#CFEAFF, #FFF);
		overflow-y: auto;
		box-sizing: border-box;

		.content {

			// overflow: hidden;
			// margin: 0 50rpx 50rpx;
			.brandList {
				.item {
					display: flex;
					// justify-content: space-between;
					align-items: center;
					margin-bottom: 20px;

					.left {
						width: 150rpx;
						height: 150rpx;

						image {
							width: 100%;
							height: 100%;
							background-color: skyblue;
						}
					}

					.right {
						margin-left: 10px;
						font-size: 14px;
						flex: 1;

						.name {
							font-size: 17px;
							font-weight: 900;
							margin-bottom: 10px;
						}

						.description {
							text-overflow: ellipsis;
							overflow: hidden;
							word-break: break-all;
							white-space: nowrap;
							width: 400rpx;
						}
					}
				}

				.loadMore {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 10px;
				}
			}
		}
	}
</style>
